<template>
  <div style="padding-bottom:100px">
    <!--导航栏-->
    <!-- <v-head headTitle="我的礼品"></v-head> -->
    <div class="content">
      <!-- 礼品列表 -->
      <van-list v-if="list.length>0" v-model="loading" :finished="finished" @load="getList">
        <!--<van-cell v-for="item in list" :key="item" :title="item + ''" />-->
        <div v-for="(item,index) in list" :key="index" class="listBox">
          <div class="item_header">
            <p>订单编号:{{item.shopOrderNo}}</p>
            <span class="state">{{state[item.state]}}</span>
          </div>
          <div class="giftList">
            <div class="giftImg">
              <img v-lazy="imgBaseUrl+item.ico" :alt="item.title" />
            </div>
            <div class="giftInfo">
              <p class="title">{{item.title}}</p>
              <p class="people">
                付款金额：
                <span class="red_font">￥{{item.isPay==='0'?item.shouldPayPrice:item.payPrice}}</span>
              </p>
              <p class="people">
                数量：
                <span>{{item.amount}}</span>
              </p>
              <p class="time">
                有效期：
                <a class="blak_font">{{item.deadline}}</a>
              </p>
              <!-- <p class="statue">礼品发放状态：<a class="giftStatue"></a></p> -->
              <!-- <p class="time">券码：
                <a class="blak_font">{{item.ticketCode}}</a>
              </p>-->
              <!-- <p class="time">
                <a style="color:#999;">{{item.ticketIntro}}</a>
              </p>-->
              <!-- <p
                class="time"
                v-if="item.link"
              >兑换条码：<a :href='item.link'>{{item.link}}</a></p>-->
              <!-- <p class="statue">标记状态：
                <span class="statueCol">已发货</span>
              </p>-->
              <!-- <p class="statue" @click="tagale(item.id,item.state)">标记状态：
                <span :style="{'color':item.state==='0'?'#3bb850':'#ff4e4e'}">{{item.state==='0'?'未使用':"已使用"}}</span>
                <img src="@/assets/images/caveat.png" class="caveat-icon" /><span class="prompt">可点击标记使用状态</span>
              </p>-->
            </div>
          </div>
          <div class="btn_wrapper">
            <!-- <button
              :class="item.state == '2'?'btnClass1':'btnClass11'"
              v-if="item.state == '2' || item.state == '8'"
              @click="stateUpdate(item.state,item.id)"
            >
              <span>{{state[item.state]}}</span>
            </button>-->
            <button class="btnClass1">
              <router-link
                :to="item.remark == '秒杀活动'?{path:'/seckillDetail',query:{id:item.seckillId}}:{path:'/points/detail',query:{id:item.productId}}"
              >
                <span>使用规则</span>
              </router-link>
            </button>
            <button
              class="btnClass1"
              v-if="item.state==='10'||item.state==='0'"
              @click="toDel(item.id)"
            >
              <span>删除订单</span>
            </button>
            <button class="btnClass1" v-if="item.expressNo" @click="logistics(item.expressNo)">
              <span>查看物流</span>
            </button>

            <button
              class="btnClass2"
              v-if="item.state==='2'||item.state==='0' || item.state==='8' ||  item.state==='9'"
            >
              <router-link
                :to="item.remark == '秒杀活动'? (item.state==='0'?{path:'/seckillstatus',query:{order:item.id,id:item.seckillId}}:{path:'/write-off',query:{id:item.id}}):(item.state==='0'?{path:'/points/detail/status',query:{order:item.id,id:item.productId}}:{path:'/write-off',query:{id:item.id}})"
              >
                <span v-text="item.state==='0'?'立即支付':'立即核销'"></span>
              </router-link>
            </button>
          </div>
        </div>
      </van-list>
    </div>
    <div class="no_data" v-if="list.length<=0">
      <img src="@/assets/images/no_gift.png" alt />
      <p>订单里啥也没有</p>
      <router-link to="/points">
        <span>前往权益商城</span>
      </router-link>
    </div>
    <span class="popup">
      <img src="@/assets/images/contact.png" v-on:click="getPopup" />
    </span>
    <Tabbar />
  </div>
</template>

<script>
import { List, Cell, Dialog, Toast } from 'vant';
import { imgBaseUrl } from '@/config/env';
import Tabbar from '@/components/tabbar';
export default {
  data() {
    return {
      imgBaseUrl,
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
      id: '', // 对应积分商城的商品id
      orderId: '',
      testmsg: 'testtesttest',
      state: {
        0: '未付款',
        1: '已付款',
        2: '已发货',
        3: '已核销',
        5: '撤销订单',
        6: '下单失败',
        7: '子订单有失败',
        8: '已使用',
        10: '已关闭'
      }
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    logistics(expressNo) {
      if (expressNo) {
        window.location.href =
          'https://m.kuaidi100.com/result.jsp?nu=' + expressNo;
      }
    },
    stateUpdate(state, id) {
      if (state === '2') {
        this.$http
          .post('/order/update', {
            id,
            state: '8'
          })
          .then(res => {
            if (res.data.code === '0') {
              Toast(res.data.message);
              this.$router.go(0);
            } else {
            }
            Toast(res.data.message);
          });
      }
    },
    getPopup() {
      Dialog.confirm({
        title: '温馨提示',
        message: '确定拨打电话0592-5215580咨询该商品'
      })
        .then(() => {
          window.location.href = ' tel:0592-5215580';
        })
        .catch(() => {});
    },
    getList() {
      this.$http
        .post('/order/list', {
          pageNum: this.pageNum.toString(),
          pageSize: '10'
        })
        .then(res => {
          console.log(res);
          if (res) {
            if (res.data.list.length > 0) {
              res.data.list.map(n => {
                // 循环添加到数组
                this.list.push(n);
                console.log('list:', this.list);
                this.orderId = n.orderId; // 获取orderId给使用规则跳转详情页用
                console.log('订单id', this.orderId);
              });
              this.loading = false;
              this.pageNum = this.pageNum + 1; // 页数累加
              if (res.data.isLastPage === true) {
                this.finished = true; // 最后一页加载结束
              }
            }
          }
        });
    },
    tagale(id, state) {
      state === '0' ? (state = '1') : (state = '0');
      this.$http
        .post('personal/ticketstate', {
          id: id + '',
          state: state
        })
        .then(res => {
          if (res.data.code === '0') {
            this.list = this.list.map(n => {
              return {
                ...n,
                state: n.id === id ? state : n.state
              };
            });
          }
        });
    },
    toDel(id) {
      Dialog.confirm({
        message: '您确定要删除该订单吗?'
      })
        .then(() => {
          this.$http
            .post('/order/delete', {
              idArr: [id]
            })
            .then(res => {
              console.log(res);
              Dialog.alert({
                message: res.data.message
              }).then(() => {
                this.list = [];
                this.loading = false;
                this.finished = false;
                this.pageNum = 1;
                this.getList();
              });
            });
        })
        .catch(() => {});
    }
  },
  components: {
    'van-list': List,
    'van-cell': Cell,
    Tabbar
  }
};
</script>

<style lang="scss" scoped>
.content {
  overflow: hidden;
  // margin-top: 88px;
}
.red_font {
  color: red;
}
.listBox {
  min-height: 250px;
  background-color: #ffffff;
  box-shadow: 0px 2px 9px 0px rgba(201, 202, 202, 0.57);
  border-radius: 8px;
  margin: 20px 30px;
  padding: 25px;
  .item_header {
    height: 80px;
    border-bottom: 1px solid #ebedf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    p {
      font-size: 28px;
      color: #7f7d7d;
    }
    .state {
      color: red;
    }
  }
  .giftList {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ebedf0;
    padding-bottom: 0.4rem;
    .giftImg {
      width: 160px;
      height: 160px;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      display: flex;
      flex: 0 0 160px;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .giftInfo {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-left: 20px;
      p {
        line-height: 1;
        margin-bottom: 28px;
        .blak_font {
          color: black;
          word-break: break-all;
        }
        .giftStatue {
          color: red;
        }
      }
      p:last-child {
        margin-bottom: 0;
        word-break: break-all;
      }
      .title {
        width: 100%;
        @include sc(28px, #3b3b3b);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
      }
      .people {
        width: 100%;
        @include sc(26px, #989898);
      }
      .time {
        width: 100%;
        @include sc(24px, #989898);
        line-height: 36px;
      }
      .statue {
        width: 100%;
        @include sc(24px, #989898);
        .statueCol {
          color: red;
        }
      }
    }
  }
  .btn_wrapper {
    // border: 1px solid red;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    .btnClass1 {
      height: 60px;
      border-radius: 8px;
      margin-left: 20px;
      font-size: 28px;
      background-color: #ffffff;
      border: 1px solid #28b46a;
      span {
        color: #28b46a;
      }
    }
    .btnClass11 {
      height: 60px;
      border-radius: 8px;
      margin-left: 20px;
      font-size: 28px;
      background-color: #ffffff;
      border: 1px solid #6a6a6a;
      span {
        color: #6a6a6a;
      }
    }
    .btnClass2 {
      height: 60px;
      border-radius: 8px;
      margin-left: 20px;
      font-size: 28px;
      background-color: #ffffff;
      border: 1px solid #28b46a;
      span {
        color: #28b46a;
      }
    }
    .btnClick {
      background-color: #197fee;
    }
    .btnOn {
      background-color: #ffffff;
      border: 1px solid #cccccc;
    }
    .borderNo {
      border: none;
    }
    .btn {
      width: 150px;
      height: 60px;
      border-radius: 8px;
      margin-left: 20px;
      font-size: 28px;
      .spanOn {
        color: #6a6a6a;
      }
      .spanClick {
        color: #ffffff;
      }
    }
  }
}
.no_data {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  img {
    width: 183px;
    height: 147px;
  }
  p {
    font-size: 36px;
    color: #868688;
    margin-top: 18px;
    margin-bottom: 21px;
  }
  a {
    width: 273px;
    height: 88px;
    border-radius: 8px;
    border: solid 1px #28b46a;
    color: #28b46a;
    text-align: center;
    line-height: 88px;
    font-size: 30px;
  }
}
.caveat-icon {
  width: 23px;
  padding-bottom: 0.1rem;
  margin-left: 10px;
}
.prompt {
  margin-left: 5px;
  @include sc(20px, #989898);
}
.popup {
  width: 100px;
  height: 100px;
  position: fixed;
  right: 30px;
  bottom: 150px;
}
</style>
